<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="customerTitle1">
          <span class="titleHead1" >审核信息</span>
        </div>
      </template>
<!--      <div v-if="auditType == 1" class="audit_div1">
       <div class="audit_div audit_color">
         <div class="audit_div5 audit_font">
          <div>
            <el-icon size=20><Promotion /></el-icon>
            <span>
            发起人
          </span>
          </div>
         </div>
         <div class="audit_div4">
           发起人:
          <span>
            张晓明
          </span>
         </div>
         <div class="audit_div4">
           发起部门：
           <span>
            市场部
          </span>
         </div>
         <div class="audit_div4">
           发起时间：
           <span>
            2023/07/22
          </span>
         </div>
       </div>
        <div class="audit_div2 ">
         <div class="audit_div3">
           <vab-icon class="icon_list" icon="arrow-right-double-fill" />
         </div>
        </div>
        <div class="audit_div audit_color1 audit_div6">
          <div class="audit_div5 audit_font1">
            <div class="audit_div7">
              <el-icon size=20><Stamp /></el-icon>
              <span>
                 一级审核
              </span>
            </div>
            <div>
              <el-icon size=15><Checked /></el-icon>
            </div>
          </div>
          <div class="audit_div4">
            审核人:
            <span>
            张晓明
          </span>
          </div>
          <div class="audit_div4">
            审核状态：
            <span>
            通过
          </span>
          </div>
          <div class="audit_div4">
            审核时间：
            <span>
            2023/07/22
          </span>
          </div>
        </div>
        <div class="audit_div audit_color1 audit_div6">
          <div class="audit_div5 audit_font1">
            <div class="audit_div7">
              <el-icon size=20><Stamp /></el-icon>
              <span>
                 一级审核
              </span>
            </div>
            <div>
            <el-icon size=15><Checked /></el-icon>
            </div>
          </div>
          <div class="audit_div4">
            审核人:
            <span>
            张晓明
          </span>
          </div>
          <div class="audit_div4">
            审核状态：
            <span>
            通过
          </span>
          </div>
          <div class="audit_div4">
            审核时间：
            <span>
            2023/07/22
          </span>
          </div>
        </div>
        <div class="audit_div2">
          <div class="audit_div3">
            <vab-icon class="icon_list" icon="arrow-right-double-fill" />
          </div>
        </div>
        <div class="audit_div audit_color1 audit_div6">
          <div class="audit_div5 audit_font1">
            <div class="audit_div7">
              <el-icon size=20><Stamp /></el-icon>
              <span>
                 二级审核
              </span>
            </div>
            <div>
              <vab-icon style="font-size: 15px" class="audit_color2" icon="hourglass-fill" />
            </div>
          </div>
          <div class="audit_div4">
            审核人:
            <span>
            张晓明
          </span>
          </div>
          <div class="audit_div4">
            审核状态：
            <span>
            待审核
          </span>
          </div>
          <div class="audit_div4">
            审核时间：
            <span>
            2023/07/22
          </span>
          </div>
        </div>
        <div class="audit_div audit_color3 audit_div6">
          <div class="audit_div5 audit_font1">
            <div class="audit_div7">
              <el-icon size=20><Stamp /></el-icon>
              <span>
                二级审核
              </span>
            </div>
            <div>
              <el-icon size=15 class="audit_color2"><Failed /></el-icon>
            </div>
          </div>
          <div class="audit_div4">
            审核人:
            <span>
            张晓明
          </span>
          </div>
          <div class="audit_div4">
            审核状态：
            <span>
            审核拒绝
          </span>
          </div>
          <div class="audit_div4">
            审核时间：
            <span>
            2023/07/22
          </span>
          </div>
        </div>
      </div>-->
      <div class="audit_renew1">
        <div class="audit_renew2 audit_renew_background1">
          <div>
            <el-avatar class="audit_renew_image"  :src="ossImageUrl('fqr.png')" />
          </div>
          <div>
            <span class="audit_renew_font1">
              发起人
            </span>
          </div>
          <div>
            <span class="audit_renew_font2">
             {{`${auditLineList?.start?.user_name || '--'}(${auditLineList?.start?.dept_name || '--'})`}}
            </span>
          </div>
          <div>
            <span class="audit_renew_font2">
            {{ timeTab(auditLineList?.start?.start_time)}}
            </span>
          </div>
          <div class="audit_renew4">

          </div>
        </div>

        <div class="audit_renew3 ">
          <div class="audit_renew_image1" />
        </div>
        <div style="display: flex" v-for="(item,index) in auditLineList?.lines" :key="index">
          <div  class="audit_renew2 audit_renew5"  v-for="(items,i) in item" :key="i" :class="items.status == 'REJECTED'||items.status == 'DELETED'?'audit_renew_background3': items.status == 'APPROVED'|| items.status == 'DONE'? 'audit_renew_background1':'audit_renew_background2' ">
            <div>
              <el-avatar v-if="items.status !== 'REJECTED'&& items.status !== 'DELETED'" class="audit_renew_image"  :src="ossImageUrl('tg.png')" />
              <el-avatar v-else class="audit_renew_image"  :src="ossImageUrl('jj.png')" />
            </div>
            <div>
            <span class="audit_renew_font1">
             {{numberAudit(index +1)}}级审批
            </span>
            </div>
            <div>
            <span class="audit_renew_font2">
            {{`${items?.user_name || '--'}(${items?.dept_name || '--'})`}}
            </span>
            </div>
            <div>
            <span class="audit_renew_font2">
             {{ timeTab(items?.audit_time)}}
            </span>
            </div>
            <div class="audit_renew4">
               <div class="audit_renew_font2 ellipsis"  style="width: 194px;padding-left: 10px;padding-Right: 10px;text-align: center">
                 <el-tooltip
                   placement="top"
                   :content="items?.comment || '--'"
                 >
                   {{items?.comment?.slice(0, 16) || '--'}}
                 </el-tooltip>
            </div>
            </div>
            <div class="audit_renew6">
<!--              || items.status == 'DONE'-->
                  <span class="audit_renew_font3" v-if="items.status == 'APPROVED'">
                <el-icon style="margin-right: 5px"><SuccessFilled /></el-icon>
<!--              通过-->
              </span>
<!--              ||items.status == 'DELETED'-->
              <span class="audit_renew_font4" v-else-if="items.status == 'REJECTED'">
            <el-icon style="margin-right: 5px"><CircleCloseFilled /></el-icon>
<!--            {{items.status == 'REJECTED'?'审核拒绝':"审核删除"}}-->
              </span>
<!--              <span class="audit_renew_font5" v-else >
                  {{items.status_str}}
              </span>-->
            </div>

          </div>
          <div v-if="index% 2 == 0 &&  auditLineList?.lines.length >1" class="audit_renew3 ">
            <div class="audit_renew_image1" />
          </div>
        </div>

      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { orderAuditLine } from "/@/api/dms/order";
import homeList, { anyTime, ossImageUrl } from "/@/views/index/storeList";
import { numberAudit, timeTab } from "/@/views/order_management/orderText";
defineOptions({
  name: 'AuditInformation',
})
const route:any = useRoute()
const auditLineList = ref<any>({})

const getAuditLine = ()=>{
  orderAuditLine({
    scene: props.type,
    order_no: route.query.id
  }).then((data:any)=>{
    if(data.code == 200){
      auditLineList.value = data.data
    }

  })
}
onMounted(()=>{
  getAuditLine()
})
 const props:any = defineProps({
  // 文件类型
  auditType: {
    type: Number,
    default: 2,
  },
   type: {
     type: Number,
     default: 'order',
   },
 })
</script>

<style lang="scss" scoped>
@import "../index";
.audit_div{
  padding: 10px;
  width: 100px;
  height: 110px;
  flex: auto;
  border-radius: 5px;
  background-color: #eee;
}
.audit_color{
  background-color:rgb(254, 240, 223);
  border-top: 3px solid rgb(247, 174, 87) ;
}
.audit_color1{
  background-color:rgb(227, 238, 255);
  border-top: 3px solid rgb(90, 156, 255) ;
}
.audit_font1{
  color: rgb(90, 156, 255);
}
.audit_font{
  color: rgb(247, 174, 87);
}
.audit_div1{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.audit_div2{
  width: 90px;
  height: 110px;
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.audit_div3{
  width: 32px;
  height: 32px;
  background-color: #00a1ff;
  border-radius: 50%;
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1px;
}
.icon_list{
  font-size: 25px;
  color: #fff;
  display: inline-block;
}
.audit_div4{
  margin-bottom: 6px;
  font-size: 12px;
}
.audit_div5{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.audit_div6{
  margin-right: 10px;
}
.audit_div7{
  display: flex;
  align-items: center;
}
.audit_color2{
  color: rgb(247, 174, 87);
}
.audit_color3{
  background-color:rgb(255, 241, 236);
  border-top: 3px solid rgb(254, 180, 157) ;
}
.audit_renew1{
  display: flex;
  overflow: auto;
  padding-bottom: 10px;
}
.audit_renew2{
  width: 194px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction:column;
  border-radius: 6px;
}
.audit_renew3{
  width: 70px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction:column;
  border-radius: 6px;
}
.audit_renew5{
  position: relative;
  margin-right: 10px
}
.audit_renew6{
  position: absolute;
  top: 1px;
  right: -4px
}
.audit_renew_background1{
  background-color: #F0F5FF;
}
.audit_renew_background2{
  border: 1px solid #165dff80;
}
.audit_renew_background3{
  background-color: #fff2f0;
}
.audit_renew_image{
  width: 24px;
  height: 24px;
}
.audit_renew_image1{
  width: 42px;
  height: 8px;
  background: url('http://dc-app-oss.oss-cn-zhangjiakou.aliyuncs.com/dms/image/lj.png');
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-origin:content-box;

}
.audit_renew_font1{
  font-family: PingFangSC-Medium;
  font-weight: 600;
  font-size: 14px;
  color: #242933;
  letter-spacing: 0;
  line-height: 22px;
}
.audit_renew_font2{
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 12px;
  color: #a4acb5;
  letter-spacing: 0;
  line-height: 20px;
}
.audit_renew4{
  width: 194px;
  height: 20px;
}
.audit_renew_font3{
  display: flex;
  align-items: center;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 16px;
  color: #23C35E;
  letter-spacing: 0;
  text-align: center;

}
.audit_renew_font4{
  height: 20px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 16px;
  color: #F52222;
  letter-spacing: 0;
  text-align: center;
  line-height: 20px;
}
.audit_renew_font5{
  height: 20px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 12px;
  color: #a4acb5;
  letter-spacing: 0;
  line-height: 20px;
}
</style>

